<template>
<div class="app-container">
  <div style="width: 600px">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="我的姓名" prop="realName">
        <el-input disabled clearable placeholder="请输入..." size="small" v-model="form.realName" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input disabled clearable placeholder="请输入..." size="small" v-model="form.mobile" maxlength="11" />
      </el-form-item>
      <el-form-item label="缩略图" required>
        <div style="color:#999">
          建议尺寸500*500px或1：1，JPG、PNG格式， 图片小于5M。
        </div>
        <el-upload
          :class="imgFilesList.length?'hiddenUpload':''"
          action="https://service.visualbook.cn/file/upload"
          list-type="picture-card"
          :file-list="imgFilesList"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="个人描述" prop="des">
        <el-input clearable placeholder="请输入..." size="small" v-model="form.des" />
      </el-form-item>
      <el-form-item label="个人简介" prop="introduction">
        <el-input clearable placeholder="请输入..." type="textarea" :rows="5" size="small" v-model="form.introduction" />
      </el-form-item>
      <el-form-item label="擅长领域" prop="label">
        <el-tag
          style="margin-right:10px;"
          closable
          v-for="(item,index) in tags"
          @close="closeTag(item)"
          :key="index">
          {{item}}
        </el-tag>
        <div style="display:flex;align-items:center">
          <el-input clearable placeholder="请输入..." size="small" v-model="tagValues" />
          <el-button @click="addTag" size="small" type="primary">添加</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit('form')">更新个人资料</el-button>
        <!-- <el-button size="small" @click="onCancel">取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>

import {
  getInfo,
  saveApi
} from '@/api/user'

export default {
  data() {
    var checkphone = (rule, value, callback) => {
		  // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
		if (value == "") {
	      callback(new Error("请输入手机号"));
	    } else if (!this.isCellPhone(value)) {//引入methods中封装的检查手机格式的方法
  	    callback(new Error("请输入正确的手机号!"));
	    } else {
	      callback();
	    }
		};
    return {
      form: {
        realName: '',
        mobile: '',
        des: '',
        introduction: '',
        label: '',
      },
      rules: {
        realName: [{
          required: true,
          message: '请输入教师姓名',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          validator: checkphone,
          trigger: 'blur'
        }],
      },
      tags: [],
      tagValues: '',
      dialogImageUrl: '',
      dialogVisible: false,
      uploadStatus: false,
      uploadUrl: '',
      imgFilesList: [],
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    isCellPhone(val) {
	    if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
	      return false;
	    } else {
        return true;
	    }
	  },
    onSubmit(formName) {
      // this.$message('submit!')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveApi({
            // realName: this.form.realName,
            // mobile: this.form.mobile,
            des: this.form.des,
            introduction: this.form.introduction,
            label: this.tags.toString(),
            picId: this.imgFilesList[0].id,
          }).then((res) => {
            this.$message.success('操作成功！');
            this.getDetail()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getDetail() {
      getInfo(this.$route.query.editId).then((res) => {
        this.form.realName = res.data.realName
        this.form.mobile = res.data.mobile
        this.form.des = res.data.des
        this.form.introduction = res.data.introduction
        if(res.data.label) {
          this.tags = res.data.label.split(',')
        }
        this.imgFilesList = [
          {
            url: res.data.picUrl,
            id: res.data.picId,
          }
        ]
      })
    },
    handleRemove(file, fileList) {
      this.uploadUrl = ''
      this.imgFilesList = []
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(e) {
      if(e.code == 200) {
        this.uploadStatus = true
        this.uploadUrl = e.data.url
        this.imgFilesList = [
          {
            url: e.data.url,
            id: e.data.id,
          }
        ]
      }
    },
    onCancel() {
      this.$router.back(-1)
    },
    addTag() {
			if(this.tagValues) {
				this.tags.push(this.tagValues)
				this.tags = Array.from(new Set(this.tags))
				this.tagValues = ''
			}
    },
    closeTag(i) {
			this.tags = this.tags.filter((item,index) => {
				return i != item
			})
    }
  }
}
</script>
<style>
  .hiddenUpload .el-upload--picture-card{
    display:none !important;
  }
</style>
<style scoped>
.line {
  text-align: center;
}
</style>
